// import { fitHeight } from '@/utils/fit';
// import type { PieItemValue } from '../utils';
const fitHeight = (data: number) => data;

// 上面空心饼图，饼图中间会显示着重文字；下面是图例。
export const ringPie = {
    series: [
        {
            type: 'pie',
            center: ['50%', '25%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: (...rest: any[]) => {
                        const { name } = rest[0];
                        const value = rest[0].percent;
                        return `{value|${value}%}\n\r{name|${name}}`;
                    },
                    rich: {
                        value: {
                            fontSize: fitHeight(28),
                            color: '#61FFFF',
                            fontWeight: 700,
                            padding: fitHeight(4)
                        },
                        name: {
                            fontSize: fitHeight(16),
                            color: '#FFFFFF'
                        }
                    }
                }
            },
            radius: ['30%', '50%']
        }
    ],
    color: ['#2DA4FF', '#98D2FF', '#6C63F0', '#FF7D1F', '#FF4343'],
    legend: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.85)'
        },
        orient: 'verticle',
        bottom: 0
    },
    tooltip: {
        show: false
    }
};

// 左边为空心饼图，饼图中间会显示着重文字；右边是图例。
export const ringPie2 = {
    series: [
        {
            type: 'pie',
            center: ['25%', '50%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: (...rest: any[]) => {
                        const { name } = rest[0];
                        const value = rest[0].percent;
                        return `{value|${value}%}\n\r{name|${name}}`;
                    },
                    rich: {
                        value: {
                            fontSize: fitHeight(28),
                            color: '#61FFFF',
                            fontWeight: 700,
                            padding: fitHeight(4)
                        },
                        name: {
                            fontSize: fitHeight(16),
                            color: '#FFFFFF'
                        }
                    }
                }
            },
            radius: ['30%', '50%']
        }
    ],
    color: ['#2DA4FF', '#98D2FF', '#6C63F0', '#FF7D1F', '#FF4343'],
    legend: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.85)'
        },
        orient: 'verticle',
        top: 'middle',
        right: 0
        // center
    },
    tooltip: {
        show: false
    }
};

// 实心饼图
export const createPieOption = (
    barCount: number,
    colorList = [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452'
    ]
) => {
    const labelOption = {
        show: true
        // position: 'insideBottom',
        // distance: 15,
        // align: 'left',
        // verticalAlign: 'middle',
        // rotate: 90,
        // formatter: '{c}  {name|{a}}',
        // fontSize: 16,
        // rich: {
        //     name: {}
        // }
    };
    return {
        tooltip: {
            trigger: 'item'
        },
        legend: {},
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         mark: { show: true },
        //         dataView: { show: true, readOnly: false },
        //         magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        color: colorList,
        series: Array.from({ length: barCount }, (v) => v).map(() => {
            return {
                type: 'pie',
                label: labelOption,
                center: ['50%', '60%'],
                radius: [0, '50%'],
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                barWidth: 17
            };
        })
    };
};

// 空心饼图 边框棱角
export const createPieRadiusOption = (
    barCount: number,
    colorList = [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452'
    ]
) => {
    const labelOption = {
        show: true
        // position: 'insideBottom',
        // distance: 15,
        // align: 'left',
        // verticalAlign: 'middle',
        // rotate: 90,
        // formatter: '{c}  {name|{a}}',
        // fontSize: 16,
        // rich: {
        //     name: {}
        // }
    };
    return {
        tooltip: {
            trigger: 'item'
        },
        legend: {},
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         mark: { show: true },
        //         dataView: { show: true, readOnly: false },
        //         magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        color: colorList,
        series: Array.from({ length: barCount }, (v) => v).map(() => {
            return {
                type: 'pie',
                label: labelOption,
                center: ['50%', '60%'],
                radius: ['30%', '50%'],
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                barWidth: 17
            };
        })
    };
};

// 空心饼图 边框圆滑
export const createPieRadiusFilletOption = (
    barCount: number,
    colorList = [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452'
    ]
) => {
    const labelOption = {
        show: true
        // position: 'insideBottom',
        // distance: 15,
        // align: 'left',
        // verticalAlign: 'middle',
        // rotate: 90,
        // formatter: '{c}  {name|{a}}',
        // fontSize: 16,
        // rich: {
        //     name: {}
        // }
    };
    return {
        tooltip: {
            trigger: 'item'
        },
        legend: {},
        color: colorList,
        itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
        },
        series: Array.from({ length: barCount }, (v) => v).map(() => {
            return {
                type: 'pie',
                label: labelOption,
                radius: ['40%', '70%'],
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                barWidth: 17
            };
        })
    };
};
